<template>
  <div class="line-echarts">
    <base-echarts :options="options" />
  </div>
</template>

<script setup lang="ts">
  import type { EChartsOption } from 'echarts'
  import baseEcharts from './base-echarts.vue'
  import type { IEchartLineType } from '../types'
  import { computed } from 'vue'

  interface IProps {
    barData: IEchartLineType
  }

  const $props = withDefaults(defineProps<IProps>(), {})

  const options = computed<EChartsOption>(() => ({
    tooltip: {
      show: true
    },
    grid: {
      left: 50,
      right: 50,
      top: 20,
      bottom: 20
    },

    xAxis: {
      type: 'category',
      data: $props.barData.xAxisData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: $props.barData.seriesData,
        type: 'bar'
      }
    ]
  }))
</script>

<style lang="scss" scoped></style>
